<script setup>
/*
Vue3中创建“响应式数据/状态”的第一种方案：REF
  let xxx = ref(initialValue) 
   + 创建出的结果是一个 RefImpl 对象
   + value属性中存储了状态值
   + 基于Object.defineProperty对value做了GET/SET劫持
   + 在JS中基于 xxx.value 获取/修改状态值「修改值会触发视图更新」
   + 但是在视图中，直接基于 RefImpl 对象操作即可，无需自己.value「vue-compiler-sfc在编译视图的时候，发现其状态是一个REF对象，自己会去调用其value值」

基于computed创建计算属性：
  let xxx = computed(()=>{ ... });
   + 创造的结果依然是一个 REF 对象「ComputedRefImpl」；value、劫持等操作和上述RefImpl对象一致！
   + 但计算属性的值默认是只读的：computed value is readonly

isRef:检测是否是REF对象「包含RefImpl、ComputedRefImpl...」
isReadonly:检测是否为只读对象「包含计算属性、props属性...」
unref:把一个REF对象变为其value值，处理完毕的结果就是一个固定的值，不在是REF对象
 */
import {
  ref,
  computed,
  isRef,
  isReadonly,
  unref,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  nextTick,
} from "vue";

let supNum = ref(10),
  oppNum = ref(5);
let ratio = computed(() => {
  let total = supNum.value + oppNum.value;
  return total === 0 ? "--" : ((supNum.value / total) * 100).toFixed(2) + "%";
});
const change = (type) => {
  type === "sup" ? supNum.value++ : oppNum.value++;
};

/* 
 给HTML元素(或子组件)设置ref属性值，值是一个“REF对象”，后期可以基于RefImpl.value获取这个DOM元素(或者子组件对象)！！
 ---
 beforeCreate/created被setup代替！！
 onBeforeMount:第一次渲染之前
 onMounted:第一次渲染完
 onBeforeUpdate:组件更新之前
 onUpdated:组件更新之后
 nextTick:在某个状态更改之后
 onBeforeUnmount:组件卸载之前
 onUnmounted:组件卸载之后
 */
let mainBox = ref(null);
onMounted(() => {
  console.log(mainBox.value);
});
</script>

<template>
  <div class="vote-box">
    <div class="header">
      <h3 class="title">Vue3比Vue2更加的好用</h3>
      <span>{{ supNum + oppNum }}</span>
    </div>

    <div class="main" ref="mainBox">
      <p>支持人数：{{ supNum }}人</p>
      <p>反对人数：{{ oppNum }}人</p>
      <p>支持比率：{{ ratio }}</p>
    </div>

    <div class="footer">
      <el-button type="primary" @click="change('sup')">支持</el-button>
      <el-button type="danger" @click="change('opp')">反对</el-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.vote-box {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 10px;
  width: 300px;
  border: 1px solid #ddd;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #ddd;

    .title {
      line-height: 40px;
      font-size: 18px;
    }

    span {
      font-size: 18px;
      color: lightcoral;
    }
  }

  .main {
    margin: 10px 0;
    p {
      line-height: 30px;
      font-size: 14px;
    }
  }
}
</style>